<!doctype html>
<html lang="en">
<head>
  	{include file="common/head"}
  	<style>
  		.swiper-slide {height: 570px;}
  		.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
		@media (max-width: 1000px) {
			.swiper-slide {height: 350px;}
		}
		.product__details__text .product__details__price {font-size: 30px;color: #dd2222;font-weight: 600;margin-bottom: 15px;}
		.product__details__text ul {border-top: 1px solid #ebebeb;padding-top: 20px;margin-top: 30px;padding-left: 0;}
		.product__details__text ul li {list-style: none;line-height: 36px;}
		.product__details__text ul li b {font-weight: 700;width: 170px;display: inline-block;}
		.product__details__text ul li .share {display: inline-block;}
  	</style>
</head>
<body>
  	{include file="common/menu"}
	{include file="common/sub"}
	<section class="product-details bg-gray py-5">
        <div class="container bg-white py-3">
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="swiper-wrapper">
                        {hkcms:volist name="Info.images"}
                        <div class="swiper-slide">
                            <img src="{$item}" />
                        </div>
                        {/hkcms:volist}
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 mt-3 mt-md-0">
                    <div class="product__details__text">
                        <h3 class="mb-3">{$Info.title}</h3>
                        <div class="product__details__rating mb-3">
                            <a href="{$Info.category.url}" class="mr-4"><i class="fa fa-list"></i> {$Info.category.title}</a>
                            <span><i class="fa fa-eye"></i> {$Info.views} {:__('View')}</span>
                        </div>
                        {if !empty($Info.price) && $Info.price>0}
                        <div class="product__details__price">¥ {$Info.price}</div>
                        {else /}
                        <div class="product__details__price">{:__('Consult')}</div>
                        {/if}
                        <p class="mb-4">{$Info.description}</p>
                        <a href="{$Info.buylink|default=''}" class="btn btn-main btn-round-full" target="_blank"><i class="fa fa-external-link-alt"></i> {:__('Buy Now')}</a>
                        <!--待定：<a href="#" class="btn btn-sm btn-primary">在线留言</a>-->
                        <ul>
                            {// attr字段是产品参数，是自定义字段，数组类型，所以继续用volist即可输出}
                            {hkcms:volist name="Info.attr"}
                            <li><b>{$key}</b> <span>{$item}</span></li>
                            {/hkcms:volist}
                            <li style="margin-top: 20px"><b>{:__('Share')}</b>
                                <div class="share">
                                    <a class="mr-3" href="http://connect.qq.com/widget/shareqq/index.html?url={:urlencode($Info.fullurl)}?sharesource=qzone&title={$Info.title}&pics={:cdn_url($Info.thumb,true)}&summary={$Info.description}&desc={$site.title}"><i class="fab fa-qq"></i></a>
                                    <a class="mr-3" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={:urlencode($Info.fullurl)}&title={$Info.title}-{$site.title}&summary={$Info.description}"><i class="far fa-star"></i></a>
                                    <a class="mr-3" href="http://service.weibo.com/share/share.php?url={:urlencode($Info.fullurl)}&title={$Info.title}-{$site.title}&pic={:cdn_url($Info.thumb,true)}"><i class="fab fa-weibo"></i></a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-12 mt-4">
                    <div class="product__details__tab">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab" aria-selected="true">{:__('Product Details')}</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tabs-1" role="tabpanel">
                                <div class="product__details__tab__desc main-content py-3">{$Info.content}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
	{include file="common/footer"}
</body>
</html>